<template>
  <el-drawer
    ref="drawer"
    :title="form.id ? '修改车位信息' : '新增车位信息'"
    :before-close="handleClose"
    :visible.sync="drawer"
    direction="rtl"
    custom-class="demo-drawer"
    size="50%"
    :wrapper-closable="false"
  >
    <el-divider />
    <!-- 内容 -->
    <div class="demo-drawer__content" style="padding: 0 20px">
      <el-form ref="form" label-position="top" :rules="rules" :model="form">
        <!-- 1 车位+小区-->
        <el-row type="flex">
          <el-form-item label="所属小区" prop="community_code">
            <el-select
              v-model="form.community_code"
              placeholder="请输入"
              style="width: 350px"
              @change="selectSearch"
            >
              <el-option
                v-for="item in CommunityList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="车位编号"
            prop="pk_code"
            style="margin-left: 30px"
          >
            <el-select
              v-model="form.pk_code"
              placeholder="请输入"
              style="width: 350px"
            >
              <el-option
                v-for="item in nameList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <!-- 2 车牌+姓名-->
        <el-row type="flex">
          <el-form-item
            label="车辆牌照"
            style="width: 350px"
            prop="license_plate"
          >
            <el-input
              v-model="form.license_plate"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="车主姓名"
            style="width: 350px; margin-left: 30px"
            prop="owner"
          >
            <el-input
              v-model="form.owner"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
        </el-row>
        <!-- 3 电话+性质 -->
        <el-row type="flex">
          <el-form-item label="联系方式" style="width: 350px" prop="tel">
            <el-input
              v-model="form.tel"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="使用性质"
            style="width: 350px; margin-left: 30px"
            prop="type"
          >
            <el-col>
              <el-radio v-model="form.type" :label="1">售</el-radio>
              <el-radio v-model="form.type" :label="0">租</el-radio>
            </el-col>
          </el-form-item>
        </el-row>
        <!-- 4 费用+备注-->
        <el-row type="flex">
          <el-form-item label="总费用" style="width: 350px" prop="cost">
            <el-input
              v-model="form.cost"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="备注"
            style="width: 350px; margin-left: 30px"
            prop="remark"
          >
            <el-input
              v-model="form.remark"
              placeholder="请输入"
              autocomplete="off"
            />
          </el-form-item>
        </el-row>
        <!-- 时间 -->
        <el-row type="flex">
          <el-form-item label="开始时间" prop="begin_time" style="width: 350px">
            <el-date-picker
              v-model="form.begin_time"
              :picker-options="2023 - 3 - 22"
              type="datetime"
              placeholder="选择日期"
              style="width: 350px"
            />
          </el-form-item>
          <el-form-item
            prop="end_time"
            label="结束时间"
            style="width: 350px; margin-left: 30px"
          >
            <el-date-picker
              v-model="form.end_time"
              :picker-options="2023 - 3 - 22"
              type="datetime"
              placeholder="选择日期"
              style="width: 350px"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-divider />
    <!-- 按钮 -->
    <div class="demo-drawer__footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="addOwner">确定</el-button>
    </div>
  </el-drawer>
</template>
<script>
import { getCommunityListApi } from '@/api/owners/member'
import {
  addUsageListApi,
  editUsageDetailsApi,
  showUsageDetailsApi,
  usageIndexListApi
} from '@/api/usage'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    drawer: {
      type: Boolean,
      default: false
    },
    usageList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      rules: {
        tel: [
          {
            required: true,
            message: '联系方式不可为空',
            trigger: 'change'
          }
        ],
        community_code: [
          {
            required: true,
            message: '所属小区不可为空',
            trigger: ['blur', 'change']
          }
        ],
        type: [
          {
            required: true,
            message: '所属类型不可为空',
            trigger: ['blur', 'change']
          }
        ],
        owner: [
          {
            required: true,
            message: '所属成员不可为空',
            trigger: ['blur', 'change']
          }
        ],
        pk_code: [
          {
            required: true,
            message: '车主名称不可为空',
            trigger: ['blur', 'change']
          }
        ],
        license_plate: [
          {
            required: true,
            message: '所属成员不可为空',
            trigger: ['blur', 'change']
          }
        ],
        cost: [
          {
            required: true,
            message: '所属成员不可为空',
            trigger: ['blur', 'change']
          }
        ],
        begin_time: [
          {
            required: true,
            message: '所属成员不可为空',
            trigger: ['blur', 'change']
          }
        ],
        end_time: [
          {
            required: true,
            message: '所属成员不可为空',
            trigger: ['blur', 'change']
          }
        ]
      },
      form: {
        community_code: '', // 小区编号
        pk_code: '', // 车辆编号
        begin_time: '', // 开始时间
        end_time: '', // 结束时间
        license_plate: null, // 车辆牌照
        cost: '', // 费用
        remark: '', // 备注
        owner: '', // 所有者
        type: '', // 类型
        tel: null // 联系方式
      },
      CommunityList: [],
      nameList: []
    }
  },
  created() {
    this.getCommunityList()
  },
  methods: {
    //! 二级联动
    async usageIndexList() {
      const { data } = await usageIndexListApi({
        community_code: this.form.community_code
      })
      this.nameList = data
      // console.log(this.nameList);
    },
    selectSearch() {
      this.usageIndexList()
      this.form.pk_code = ''
    },
    //! 回显
    async editechoDate(id) {
      const { data } = await showUsageDetailsApi(id)
      this.form = data
      this.getCommunityList()
      if (this.form.id) {
        this.usageIndexList()
      } else {
        return
      }
    },
    // !新增
    addOwner() {
      this.$refs.form.validate(async flag => {
        if (!flag) return
        // 开始-结束时间
        this.form.begin_time = this.formatTimeThat(this.form.begin_time)
        this.form.end_time = this.formatTimeThat(this.form.end_time)
        if (this.form.id) {
          await editUsageDetailsApi(this.form)
          this.$message.success('修改成功')
          this.nameList = []
        } else {
          await addUsageListApi(this.form)
          this.$message.success('添加成功')
        }
        this.handleClose()
        this.$parent.usagePagingList()
      })
    },

    //! 渲染小区下拉
    async getCommunityList() {
      const { data } = await getCommunityListApi(this.current, this.pageSize)
      this.CommunityList = data
    },
    //! 转换时间
    formatTimeThat(time) {
      return +new Date(time)
    },
    //! 关闭
    handleClose() {
      this.$emit('update:drawer', false)
      this.$refs.form.resetFields()
      this.nameList = []
      this.form = {
        community_code: '', // 小区编号
        pk_code: '', // 车辆编号
        begin_time: '', // 开始时间
        end_time: '', // 结束时间
        license_plate: null, // 车辆牌照
        cost: '', // 费用
        remark: '', // 备注
        owner: '', // 所有者
        type: 1, // 类型
        tel: null // 联系方式
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.quillEditor {
  line-height: normal;
}
::v-deep .el-drawer__header {
  margin-bottom: 15px;
  position: relative;
  margin-left: 56px;
}
::v-deep .el-icon-close {
  position: absolute;
  left: -35px;
  top: 18px;
}
::v-deep .el-radio {
  margin-right: 15px;
}
::v-deep .el-form {
  height: 550px;
  overflow: scroll;
  overflow-x: hidden;
}
::v-deep .ql-container {
  height: 100px;
}
.demo-drawer__footer {
  float: right;
  margin-right: 30px;
}
::v-deep .hr {
  color: #f0f0f0;
}
</style>
